<script setup lang="ts">
import type { ShopcartItemType } from '@/type/lidare'
import { ref, watch } from "vue"
import { useCounterStore } from '@/stores/counter'
import { showToast } from "vant"
const store = useCounterStore();
const { changeShopCartListItem, changeShopCartList } = store;
const props = defineProps<{
  item: ShopcartItemType,
  isShowDelete: boolean
}>();
const count = ref(1);
count.value = props.item.count;
watch(count, (val) => {
  console.log(val);
  let item = {
    ...props.item,
    count: val
  }
  changeShopCartListItem(item);
});
const changeSelect = () => {
  console.log(props.item.isSelect);
  let item = {
    ...props.item,
    isSelect: !props.item.isSelect
  }
  changeShopCartListItem(item);
}
const deleteThisItem = () => {
  changeShopCartList({ item: props.item, type: false });
  showToast("删除成功");
}
</script>
<template>
  <div class="shopcart-item">
    <van-icon @click.stop="deleteThisItem" v-show="isShowDelete" class="icon-delete" name="delete-o" />
    <div class="left" @click.stop="changeSelect">
      <svg v-if="!props.item.isSelect" t="1678869065413" class="icon" viewBox="0 0 1024 1024" version="1.1"
        xmlns="http://www.w3.org/2000/svg" p-id="2728" width="16" height="16">
        <path
          d="M512 192c176.768 0 320 143.274667 320 320 0 176.768-143.274667 320-320 320-176.768 0-320-143.274667-320-320 0-176.768 143.274667-320 320-320z m0 41.28c-153.962667 0-278.72 124.757333-278.72 278.72S358.037333 790.72 512 790.72 790.72 665.962667 790.72 512 665.962667 233.28 512 233.28z"
          fill="#151515" p-id="2729"></path>
      </svg>
      <svg v-else t="1678872347980" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
        p-id="3296" width="16" height="16">
        <path
          d="M501.504 170.666667c182.741333 0 330.816 148.117333 330.816 330.837333 0 182.741333-148.117333 330.816-330.816 330.816C318.72 832.32 170.666667 684.202667 170.666667 501.504 170.666667 318.72 318.784 170.666667 501.504 170.666667z m0 42.666666C342.336 213.333333 213.333333 342.314667 213.333333 501.504c0 159.146667 128.981333 288.149333 288.170667 288.149333 159.146667 0 288.149333-128.981333 288.149333-288.149333C789.653333 342.336 660.693333 213.333333 501.504 213.333333z m144.064 150.549334a25.152 25.152 0 0 1 36.053333 35.050666l-218.666666 224.896a25.152 25.152 0 0 1-35.242667 0.789334l-106.197333-99.968a25.152 25.152 0 1 1 34.453333-36.608l88.405333 83.2 201.194667-207.36z"
          fill="#e0253c" p-id="3297"></path>
      </svg>
    </div>
    <div class="midle">
      <img :src="props.item.image" alt="">
    </div>
    <div class="right">
      <div class="my-text fullName">{{ props.item.fullName }}</div>
      <div class="promotionalSign">
        <div class="promotionalSign-item">{{ "新用户先消费，后付款" }}
        </div>
      </div>
      <div class="item-footer">
        <div class="price"><span>&yen;</span>{{ (Number.parseInt(props.item.salesPrice) / 100) * props.item.count }}</div>
        <div class="count">
          <van-stepper v-model="count" min="1" max="99" />
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.shopcart-item {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding: .15rem;
  display: flex;
  background-color: var(--bgc-white);
  border-radius: .1rem;
  margin-bottom: .1rem;

  .icon-delete {
    position: absolute;
    right: 0.2rem;
    top: .568rem;
    font-size: .2rem;
    color: var(--text-gray);
  }

  .left {
    width: .25rem;
    min-width: .25rem;
    height: .25rem;
    margin-top: .25rem;
  }

  .midle {
    width: .6rem;
    min-width: .6rem;
    height: .7rem;
    border-radius: .04rem;
    overflow: hidden;
    margin: 0 .1rem;
  }

  .right {
    flex-grow: 1;

    .fullName {
      -webkit-line-clamp: 2;
      font-size: .15rem;
      color: var(--text-black);
      line-height: .2rem;
    }

    .promotionalSign {
      width: 85%;

      .promotionalSign-item {
        display: inline-block;
        color: var(--text-red);
        border: 0.01rem solid var(--text-red);
        padding: 0 0.02rem;
        box-sizing: border-box;
        font-size: .12rem;
        border-radius: .02rem;
        margin-top: .04rem;
      }
    }

    .item-footer {
      margin-top: .2rem;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .price {
        color: var(--text-red);
        font-weight: bold;
        font-size: .15rem;

        >span {
          font-size: .12rem;
        }
      }

    }
  }
}
</style>